<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京东网-服装鞋包模块</title>

    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        .float-left {
            float: left;
        }

        .float-right {
            float: right;
        }

        .clear {
            clear: both;
        }

        .red {
            color: red;
        }

        .tiny-border {
            border: 0.5px solid gray;
        }

        .main-content {
            margin: 100px 20% 20% 0;
            float: left;
            position: relative;
            left: 50%;
        }

        .wrap {
            float: left;
            position: relative;
            right: 50%;
            border-top: 1px solid red;
        }

        .col1 {
            width: 330px;
            height: 630px;
            background: white;
            float: left;
        }

        .col1-blk1 {
            height: 350px;
            background: url("img/pic_big.jpg") no-repeat;
        }

        .col1-blk2 {
            background: #f0f5ee;
            padding: 10px 12px;
        }

        .col1-blk2-link {
            font-size: 13px;
            font-weight: bold;
            color: #767c74;
            text-decoration: none;
            margin: 0 3px;
        }

        .col1-blk2-link:hover {
            color: orangered;
        }

        .col1-blk2-line {
            margin: 5px 0;
        }

        .col1-blk3 {
            height: 157px;
            background: url("img/pic1.jpg") no-repeat;
        }

        .col2 {
            width: 439px;
            height: 630px;
            float: left;
        }

        .col2-blk1 {
            height: 157px;
            background: url("img/pic2.jpg") no-repeat;
        }

        .col2-blk2 {
            height: 315px;
            background: url("img/pic3.jpg") no-repeat;
        }

        .col2-blk3 {
            height: 157px;
            background: url("img/pic4.jpg") no-repeat;
        }

        .col3 {
            width: 219px;
            height: 630px;
            float: left;
        }

        .col3-blk1 {
            height: 157px;
            background: url("img/pic5.jpg") no-repeat;
        }

        .col3-blk2 {
            height: 157px;
            background: url("img/pic7.jpg") no-repeat;
        }

        .col3-blk3 {
            height: 157px;
            background: url("img/pic8.jpg") no-repeat;
        }

        .col3-blk4 {
            height: 157px;
            background: url("img/pic6.jpg") no-repeat;
        }

        .col4 {
            width: 219px;
            height: 630px;
            float: left;
        }

        .col4-blk1 {
            height: 157px;
            background: url("img/pic9.jpg") no-repeat;
        }

        .col4-blk2 {
            height: 157px;
            background: url("img/pic10.jpg") no-repeat;
        }

        .col4-blk3 {
            height: 316px;
            background: url("img/pic11.jpg") no-repeat;
        }
    </style>
</head>
<body>
<div class="main-content">
    <div class="wrap">
        <!--第一列-->
        <div class="col1">
            <div class="col1-blk1 tiny-border">
            </div>
            <div class="col1-blk2 tiny-border">
                <div class="col1-blk2-line">
                    <a href="http://www.deepin.org" target="_blank" class="col1-blk2-link float-left">潮流女装</a>
                    <a href="http://www.deepin.org" target="_blank" class="col1-blk2-link float-left">丝巾</a>
                    <a href="http://www.deepin.org" target="_blank" class="col1-blk2-link float-right">菩提手串</a>
                    <a href="http://www.deepin.org" target="_blank" class="col1-blk2-link float-right">水晶手链</a>
                    <div class="clear"></div>
                </div>
                <div class="col1-blk2-line">
                    <a href="http://www.deepin.org" target="_blank" class="col1-blk2-link float-left">服装城</a>
                    <a href="http://www.deepin.org" target="_blank" class="col1-blk2-link float-left">品质男鞋</a>
                    <a href="http://www.deepin.org" target="_blank" class="col1-blk2-link float-right">时尚女包</a>
                    <a href="http://www.deepin.org" target="_blank" class="col1-blk2-link float-right">精品男包</a>
                    <div class="clear"></div>
                </div>
                <div class="col1-blk2-line">
                    <a href="http://www.deepin.org" target="_blank" class="col1-blk2-link float-left">时尚女鞋</a>
                    <a href="http://www.deepin.org" target="_blank" class="col1-blk2-link float-left">精品男装</a>
                    <a href="http://www.deepin.org" target="_blank" class="col1-blk2-link float-right">维氏手表</a>
                    <a href="http://www.deepin.org" target="_blank" class="col1-blk2-link float-right">奢品名表</a>
                    <div class="clear"></div>
                </div>
                <div class="col1-blk2-line">
                    <a href="http://www.deepin.org" target="_blank" class="col1-blk2-link float-left">舒适睡衣</a>
                    <a href="http://www.deepin.org" target="_blank" class="col1-blk2-link float-left">奢侈品</a>
                    <a href="http://www.deepin.org" target="_blank" class="col1-blk2-link float-right">腕表献礼</a>
                    <a href="http://www.deepin.org" target="_blank" class="col1-blk2-link float-right">智能手表</a>
                    <div class="clear"></div>
                </div>
            </div>
            <div class="col1-blk3 tiny-border">
            </div>
        </div>

        <!--第二列-->
        <div class="col2">
            <div class="col2-blk1 tiny-border"></div>
            <div class="col2-blk2 tiny-border"></div>
            <div class="col2-blk3 tiny-border"></div>
        </div>

        <!--第三列-->
        <div class="col3">
            <div class="col3-blk1 tiny-border"></div>
            <div class="col3-blk2 tiny-border"></div>
            <div class="col3-blk3 tiny-border"></div>
            <div class="col3-blk4 tiny-border"></div>
        </div>

        <!--第四列-->
        <div class="col4">
            <div class="col4-blk1 tiny-border"></div>
            <div class="col4-blk2 tiny-border"></div>
            <div class=" col4-blk3 tiny-border"></div>
        </div>
    </div>
</div>
</body>
</html>